<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<div id="main"></div>

<form action="">

    <div>姓名：<input type="text"> 学号：<input type="text"> <button id="add" type="button">添加一个</button></div>

</form>


<div id="xxx" style="color: red"></div>
<div id="yyy" style="color: blue"></div>

<button type="button" id="btn">点一下</button>
<button type="button" id="btn2">再点一下</button>


<div id="zzz">
    <div id="aaa">我怎么那么帅</div>
</div>

<script>

    // 替换一个节点
    // var aaa = document.getElementById('aaa');
    // var s1 = document.createElement('span');
    // s1.innerHTML = '我爱我的祖国';
    // document.getElementById('zzz').replaceChild(s1, aaa)

    // 移除一个节点
    // document.getElementById('zzz').removeChild(document.getElementById('aaa'))


    // var s1 = document.createElement('span');
    // s1.innerHTML = '我爱我的祖国';
    // document.getElementById('xxx').appendChild(s1);
    //
    // s1 = document.createElement('span');
    // s1.innerHTML = '我爱我的祖国';
    // document.getElementById('yyy').appendChild(s1)


    // document.getElementById('btn').onclick = function () {
    //     var s1 = document.createElement('span');
    //     s1.setAttribute('id', 's1');
    //     s1.innerHTML = '我我我的祖国';
    //     document.getElementById('xxx').appendChild(s1)
    //
    //
    // };
    //
    //
    // document.getElementById('btn2').onclick = function () {
    //     // 获取已存在的对象的时候，该对象只能在DOM中存在一份
    //     var s = document.getElementById('s1');
    //     document.getElementById('yyy').appendChild(s)
    // }


    // var main = document.getElementById('main');
    // var s1 = document.createElement('span');
    // s1.innerHTML = '我我我的祖国'
    // 在某个节点的内部末尾插入新节点
    // main.appendChild(s1)

    // var add = document.getElementById('add');
    // add.onclick = function () {
    //
    //     var div = document.createElement('div');
    //     div.innerHTML = '姓名：<input type="text"> 学号：<input type="text">';
    //     add.parentElement.parentElement.appendChild(div)
    // }

    // document.getElementById('add').onclick = function () {
    //     var div = document.createElement('div');
    //     div.innerHTML = '姓名：<input type="text"> 学号：<input type="text">';
    //     this.parentElement.parentElement.appendChild(div)
    // }


    // document.getElementById('add').onclick = function (){
    //
    //     var div = document.createElement('div');
    //     div.innerHTML = '姓名：<input type="text"> 学号：<input type="text">';
    //
    //     var oldDiv = this.parentElement;
    //
    //     // insertBefore 在一个元素节点前插入新节点
    //     // 参数1： 要插入的新节点
    //     // 参数2： 在哪个节点之前插入
    //     // 该方法的调用主体是：父节点
    //     oldDiv.parentElement.insertBefore(div, oldDiv)
    //
    // }







</script>

</body>
</html>